<template>
    <div class="contion">
        <div class="setting">
            <van-icon name="arrow-left" size="20" @click="back()" style="margin-left:20px"/>
            <span style="margin-left:200px"><b>设置</b></span>
        </div>
        <div class="my_4" @click="privacy">
            <el-icon :size="20" class="my_4_1"><Key /></el-icon>
            <div class="setting_1">
                <span>账户</span>
                <span class="setting_2">隐私、安全</span>
            </div>
            <el-icon class="my_4_3" :size="20"><ArrowRight /></el-icon>
        </div>
        <div class="my_4" @click="privacy">
            <el-icon :size="20" class="my_4_1"><Help /></el-icon>
            <div class="setting_1">
                <span>应用程序语言</span>
                <span class="setting_2">English</span>
            </div>
            <el-icon class="my_4_3" :size="20"><ArrowRight /></el-icon>
        </div>
        <div class="my_4" @click="privacy">
            <el-icon :size="20" class="my_4_1"><Bell /></el-icon>
            <div class="setting_1">
                <span>通知</span>
                <span class="setting_2">信息</span>
            </div>
            <el-icon class="my_4_3" :size="20"><ArrowRight /></el-icon>
        </div>
        <div class="my_4" @click="privacy">
            <el-icon :size="20" class="my_4_1"><SetUp /></el-icon>
            <div class="setting_1">
                <span>帮助</span>
                <span class="setting_2">联系我们、隐私政策</span>
            </div>
            <el-icon class="my_4_3" :size="20"><ArrowRight /></el-icon>
        </div>

    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {ElMessage} from 'element-plus'
import axios from 'axios'
import {useRouter} from 'vue-router'
import Article from "./Article.vue"
import { SetUp } from "@element-plus/icons-vue"

const router = useRouter()

const back = () =>{
    router.back();
}

</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.setting{
    width: 500px;
    margin-top: 20px;
}


.my_4{
    width: 500px;
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    margin-left: 30px;
    border-bottom: 1px solid darkgrey;
    padding-bottom: 10px;
}
.my_4_1{
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 20px;
}

.my_4_3{
    margin-top: 10px;
    margin-left: 260px;
}

.setting_1{
    width: 150px;
    display: flex;
    flex-direction: column;
}

.setting_2{
    font-size: 15px;
    color: darkgray;
}

</style>